import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom'
import './mdContent.scss'

class MdContent extends Component {
    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if (anchorElement) {
                anchorElement.scrollIntoView();
            }
        }
    }

    render() {
        return (
            <div className='mdContent'>
                <ul className='mdCNva'>
                    <li onClick={() => this.scrollToAnchor('mdC1')} className='adDww'>套餐详情</li>
                    <li onClick={() => this.scrollToAnchor('mdC2')}>细节展示</li>
                    <li onClick={() => this.scrollToAnchor('mdC3')}>产品优势</li>
                    <li onClick={() => this.scrollToAnchor('mdC4')}>定制流程</li>
                </ul>
                <div className='mdC' id='mdC1' dangerouslySetInnerHTML={{__html: this.props.thingContent1}}>

                </div>
                <div className='mdC' id='mdC2'>
                    <img src={require('../../../static/img/details/ty/1_1.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/1_2.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/1_3.png')} alt="pic"/>
                </div>
                <div className='mdC' id='mdC3'>
                    <img src={require('../../../static/img/details/ty/2_1.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_2.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_3.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_4.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_5.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_6.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_7.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_8.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_9.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_10.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_11.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_12.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/ty/2_13.png')} alt="pic"/>
                </div>
                <div className='mdC' id='mdC4'>
                    <img src={require('../../../static/img/details/door/3_1.png')} alt="pic"/>
                    <img src={require('../../../static/img/details/door/3_2.png')} alt="pic"/>
                    <div className='kf20'>
                        <Link className='kf20chat' to="/chatonline">
                            <div>
                                <img src={require('../../../static/img/details/door/3_31.jpg')} alt="pic"/>
                            </div>
                        </Link>
                        <Link className='kf20chat' to="/chatonline">
                            <div>
                                <img src={require('../../../static/img/details/door/3_33.jpg')} alt="pic"/>
                            </div>
                        </Link>
                        <Link className='kf20chat' to="/chatonline">
                            <div>
                                <img src={require('../../../static/img/details/door/3_32.jpg')} alt="pic"/>
                            </div>
                        </Link>
                        <Link className='kf20chat' to="/chatonline">
                            <div>
                                <img src={require('../../../static/img/details/door/3_34.jpg')} alt="pic"/>
                            </div>
                        </Link>
                    </div>
                </div>

            </div>
        )
    }
}

const mapStateToProps = (state) => {
    let aaa = state.proMainDetails.thingDetails;
    if (aaa.thingTitle) {
        //console.log(aaa.thingContent1);
        return {
            thingContent1: aaa.thingContent1,
            thingContent2: aaa.thingContent2,
            thingContent3: aaa.thingContent3,
            thingContent4: aaa.thingContent4
        }
    } else {
        return {}
    }

}
export default connect(mapStateToProps)(MdContent)